<style>
    .err {
        color:#c00;
    }
</style>
<template>
    <div id="login">
        Name:
        <input type="text" v-model="name"><br>

        Password:
        <input type="text" v-model="password"><br>

        <button @click="login">Login</button><span class="err" v-show="err">{{err}}</span>
        <hr>
        <show-state></show-state>
    </div>
</template>
<script>
    import ShowState from '../layout/components/ShowState';

    import {mapActions} from 'vuex';
    import aes from '@/utils/aes';

    export default {
        name:'Login',
        data(){
            return {
                name:'admin',
                password:'123456',
                err:null
            }
        },
        components:{
            ShowState
        },
        computed:{
            aesPwd(){
                return aes.encryption(this.password);
            }
        },
        methods:{
            ...mapActions('user',['loginByUsername']),
            login(){
                if(!this.name.trim() || !this.password.trim())return this.err='Enter name & password!';
                console.log('aesPwd:',this.aesPwd);
                this.loginByUsername({name:this.name,password:this.aesPwd}).then(()=>{
                    console.log('登录成功!');
                    this.$router.push({ path: this.redirect || '/index' });
                }).catch(err=>{
                    console.error(err);
                    this.err=err;
                });
            }
        }
    }
</script>